import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,Platform,StatusBar
} from 'react-native';
import Common from '../common/constants';
import AutoHeightImage from 'react-native-auto-height-image';

import {NavigationPage, ListRow, SearchInput} from 'teaset';
var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 10;//25;
//ios:20+44=64;
//android:56+25=81
var HEADER_HEIGHT = Platform.OS === 'ios' ? 44 + STATUS_BAR_HEIGHT : 56 + STATUS_BAR_HEIGHT;


export default class SearchHeader extends React.Component 
{
    constructor(props) {
        super(props);
        this.state = {
            isShowStatusBar: true,
            searchKey:'',
            focusHeight:20
        };
    }

  _handleSubmit(thiz) {


    if (thiz.props.onChangeText&&thiz.state.searchKey)
    {
      thiz.props.onChangeText(thiz.state.searchKey);
    }

  }

//二级菜单 颜色 rgb(206,78,56)
    render() {
        let marginTop=this.state.isShowStatusBar?0:STATUS_BAR_HEIGHT;
        return (
            <View style={{backgroundColor: 'red'}}>

            <StatusBar
                    animated={true}
                    hidden={this.state.isShowStatusBar}
                    backgroundColor={'blue'}
                    translucent={true}
                    barStyle={'default'}
                    showHideTransition={'fade'}
                    networkActivityIndicatorVisible={true}
                />


                <View style={[styles.headerWrap,{marginTop:0}]}>
                    <TouchableOpacity
                        activeOpacity={0.75}
                        onPress={()=>{this.setState({isShowStatusBar:(this.state.isShowStatusBar?false:true)})}}
                        style={[{flexDirection: 'row',flex:4}]}
                    >
                        <Text style={{color:'white',fontWeight: '900' ,fontSize:20}}>智慧城区</Text>
                        <Text style={{color:'white',marginLeft:5,flexDirection: 'row',paddingTop:3}}>
                            共<Text style={{color:'white',fontWeight: '900',fontSize:16 }}>享</Text>
                            共<Text style={{color:'white',fontWeight: '900',fontSize:16}}>治</Text>
                        </Text>
                    </TouchableOpacity>
                    <SearchInput ref="searchKey" style={{flex:5,marginLeft:15,height:this.state.focusHeight}} 
                        placeholder='输入查询信息'
                         autoCapitalize={'none'} autoCorrect={false}  clearButtonMode='while-editing'
                         onChangeText={(text) => {this.setState({searchKey:text})}} 
                         onFocus={()=>{this.setState({focusHeight:30})}}
                         onBlur={()=>{this.setState({focusHeight:20})}}
                    />
                    <TouchableOpacity
                        style={{flex:1}}
                        activeOpacity={0.75}
                        onPress={()=>this._handleSubmit(this)}
                    >
                        <Text style={{fontSize:16,color:'white'}}>搜索</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    headerWrap: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: '#ff7419',
        // borderBottomColor: '#ccc',
        // borderBottomWidth: 0.5,
        height: 44,
        
        // borderTopWidth: 1,
        // borderTopColor: 'white'
    },

    searchInput: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 24,
        width: Common.window.width - 30 - 6 * 3,
        marginTop: STATUS_BAR_HEIGHT,
        // backgroundColor: '#ff7419',
        borderRadius: 2,
    },

    searchIcon: {
        width: 20,
        height: 20,
    },

    scanIcon: {
        marginTop: 16,
        width: 20,
        height: 20,
    },

    searchPlaceholder: {
        marginLeft: 10,
        textAlign: 'center',
        fontSize: 15,
        color: 'gray'
    }
})